<template>
	<view class="list">
		<!-- 总容器 -->
		<view>
			<u-navbar title="点餐"></u-navbar>
		</view>
		
		<view class="container">
			<!-- 顶部轮播图 -->
			<view class="carousel">
				<swiper class="listswiper" :autoplay="true">
					<template v-for="(item,index) in imglist">
						<swiper-item :key="index">
							<image :src="item" class="listswiperImg"></image>
						</swiper-item>
					</template>
				</swiper>
			</view>
			<!-- 点餐内容 -->
			<view class="cascadmemu">
				<!-- 左边类编栏 -->
				<view class="cascadmemuleft" :style="{height:boxheight}">
					<view class="fixedleft">
						<template v-for="(item,index) in menus">
							<view :key="index" class="cascadmemuleftli"
								:class="{cascadmemuleftliactive:index===isActive}" @click="changeCurrent(index)">
								{{item.name}}
							</view>
						</template>
					</view>
				</view>
				<!-- 右边菜品内容 -->
				<scroll-view class="cascadmemuright" :scroll-y="true" @scroll="scroll" :scroll-top="scrollViewTop"
					:style="{height:boxheight}">
					<!-- 循环显示 -->
					<template v-for="(memu,i) in menus">
						<view :id="`card`+ i" :key="i">
							<div :full="true" margin="0" :border="false">
								<view class="cardhead" slot="head">
									<view>{{memu.name}}</view>
								</view>
								<view class="menucontent" slot="body">
									<template v-for="(item,j) in memu.data">
										<view :key="item.id" class="memuitemli">
											<view
												style="width: 450rpx;height:180rpx; display: flex;flex-direction: row;justify-content: flex-start;">
												<image class="memuitemligoodimg" :src="item.imgUrl"></image>
												<view
													style="margin-left: 30rpx; display: flex;flex-direction: column;align-items: center;">
													<view style="font-size: 40rpx;">{{ item.title }}</view>
													<view class="memuitemligoodprice">
														￥{{ item.price }}
													</view>
												</view>
											</view>
											
											<view id="addandsub">
												<u-number-box v-model="item.chooseNumber" :min="0" :max="10">
												    <view
												        slot="minus"
												        class="minus"
												    >
												        <u-icon
												            name="minus"
												            size="12"
															@click="sub(item)"
												        ></u-icon>
												    </view>
												    <text
												        slot="input"
												        style="width: 50px;text-align: center;"
												        class="input"
												    >{{item.chooseNumber}}</text>
												    <view
												        slot="plus"
												        class="plus"
												    >
												        <u-icon
												            name="plus"
												            color="#FFFFFF"
												            size="12"
															@click="add(item)"
												        ></u-icon>
												    </view>
												</u-number-box>
											</view>
										</view>
									</template>
								</view>
							</div>
						</view>
					</template>

				</scroll-view>
			</view>
		</view>
		
		<view class="payView" @click="showDetailList">
			<view class="numberPirce_view">
				<u-count-to class="numberPirce"
				:startVal="lastPrice"
				:endVal="totalPrice"
				:fontSize="30"
				color="#FFFFFF"
				:bold="true"
				>
				</u-count-to>
			</view>
			
			<view class="Button_pay_view" >
				<button class="payButton" @click="pay">付款</button>
			</view>
			
	
		</view>
		
		<u-popup :show="showButtom" @close="close" @open="open" class="bottom">
		   
		   <view class="totalPriceButtom">
			   ￥
			   <u-count-to
			   :startVal="totalPrice"
			   :endVal="totalPrice"
			   :fontSize="30"
			   color="#000000"
			   :bold="true">
				   
			   </u-count-to>
			   
		   </view>
		   <view v-if="ListChoose.length>0">
				<view v-for="(item,index) in ListChoose" class="listOfChoice">
				    <view class="viewOfDishes">
						<u-avatar 
						:src="item.avatar" 
						shape="square" 
						size=80>
						</u-avatar>
					</view>
					
					<view class="informationOfDishes">
						<view class="dishName">{{item.name}}</view>
						<view class="dishPrice">￥{{item.price * item.number}}</view>
					</view>
					
					<view class="dishNumer">
						
						<u-number-box v-model="item.showNumber" :min="0" :max="10">
						    <view
								slot="minus"
						        class="minus"
						    >
						        <u-icon
						            name="minus"
						            size="12"
									@click="subButtom(item)"
						        ></u-icon>
						    </view>
						    <text
						        slot="input"
						        style="width: 50px;text-align: center;"
						        class="input"
						    >{{item.number}}</text>
						    <view
						        slot="plus"
						        class="plus"
						    >
							<!--  -->
						        <u-icon
						            name="plus"
						            color="#FFFFFF"
						            size="12"
									@click="addButtom(item)"
						        >
								</u-icon>
						    </view>
						</u-number-box>
						
					</view>
					
				</view>
		   </view>
		   <view class="blank"></view>
		</u-popup>
		
	</view>
</template>
<script>
	import {
		mapActions,
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		name: 'list',
		
		data() {
			return {
				isActive: 0,
				imglist: [
					"http://47.106.199.123:8080/pictures/category/food0.png",
					"http://47.106.199.123:8080/pictures/category/food1.png",
					"http://47.106.199.123:8080/pictures/category/food2.png"
				],
				menus: [
				],
				scrollViewTop: 0,
				cardsheight: [],
				text: 5,
				windowheight: 0,
				offsetheight: 0,
				navheight: 0,
				boxheight: '87.5vh',
				inscrolling: false,
				ListChoose:[],
				showButtom:false,
				value:1,
				totalPrice:0,
				lastPrice:0,
			}
		},
		computed: {
			...mapState('cart', {
				goods: 'items'
			}),
			...mapGetters('cart', [
				'cartItemCount',
				'totalItemCount',
				'cartTotalPrice',
				'itemsCount',
			])
		},
		mounted() {			
			var _this = this
			uni.request({
				url:_this.$store.state.IP+"Dish/",
				method:"GET",
				success(res) {
					console.log("获取的菜单列表的数据为："+res.data.msg)
					_this.menus = res.data.msg
				}
			})
		
		},
		
		methods: {
			...mapActions('cart', [
				'addProductToCart',
				'clear'
			]),
			
				
			// 点击类编栏改变右边内容函数
			changeCurrent(index) {
				let val = 1;
				for (let i = 0; i < index; i++) {
					val += this.cardsheight[i];
				}
				this.scrollViewTop = val;
				this.isActive = index;
			},
			// 滚动效果
			scroll(e) {
				if (!this.inscrolling) {
					this.inscrolling = true;
					let val = 0;
					for (let i = 0; i < this.menus.length; i++) {
						val += this.cardsheight[i];
						if (e.detail.scrollTop < val) {
							this.isActive = i;
							this.inscrolling = false;
							break;
						}
					}
				}
			},
			// 添加菜品
			add(item) {
				console.log("add:主界面里面的add方法")
				var _this = this
				var flag = 1
				for(var i=0;i<_this.ListChoose.length;i++)
				{
					if(item.id === _this.ListChoose[i].id)
					{
						_this.ListChoose[i].number++
						flag = 0
						break
					}
				}
				if(flag === 1)
				{
					var temp = {
						
						id:item.id,
						avatar:item.imgUrl,
						price:item.price,
						name:item.title,
						number:1,		
						showNumber:1
					}
					_this.ListChoose.push(temp)
				}
				this.updateTotalPrice()
			},
			
			addButtom(item){
				var _this = this
				item.number++
				_this.updateTotalPrice()
			},
			subButtom(item){
				var _this = this
				item.number--
				_this.updateTotalPrice()
			},
			
			// 减少菜品
			sub(item) {
				console.log("sub:在主界面里面的")
				var _this = this
				for(var i=0;i<_this.ListChoose.length;i++){
					if(_this.ListChoose[i].id === item.id){
						if(_this.ListChoose[i].number === 1){
							_this.ListChoose.splice(i)
						}
						else{
							_this.ListChoose[i].number--
						}
						break;
					}
				}
				this.updateTotalPrice()
			},
			showDetailList(){
				var _this = this
				
				if(_this.ListChoose.length>0){
					_this.showButtom = true
				}
				
			},
			pay(){
				
				var _this = this
				console.log(_this.ListChoose)
				
				let items = encodeURIComponent(JSON.stringify(_this.ListChoose));
				uni.navigateTo({
					url:"../confirmOrder/confirmOrder?orderList="+items+"&price="+_this.totalPrice
					
				})
			},
			close(){
				var _this = this
				_this.showButtom = false
			},
			open(){
				
			},
			updateTotalPrice(){
				var _this = this
				var total = 0
				var lastPrice = _this.totalPrice
				_this.lastPrice = lastPrice
				for(var i=0;i<_this.ListChoose.length;i++)
				{
					var temp = _this.ListChoose[i].price * _this.ListChoose[i].number
					total += temp
				}
				_this.totalPrice = total
			},
			test(){
				console.log("test")
			}
			
		}
	}
</script>
<style lang="scss">
	.list {
		width: 100%;
		height: 70%;
	}

	.container {
		width: 100%;
		height: 70%;
	}

	.listswiper {
		width: 100%;
		height: 300rpx;
	}

	.listswiperImg {
		width: 100%;
		height: 300rpx;
	}

	.cascadmemu {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
	}

	.cascadmemuleft {
		flex: 1;
		width: 100%;
		position: sticky;
		text-align: center;
		background-color: #eeeeee;
	}

	.cascadmemuleftli {
		padding: 3vh 0;
		width: 100%;
	}

	.cascadmemuleftliactive {
		background-color: #aaaaaa;
		color: #009900;
	}

	.cascadmemuright {
		flex: 4;
		width: 100%;
		overflow: scroll;
		background-color: #f0f0f0;
	}

	.memuitemli {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		height: 180rpx;
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}

	.cardhead {
		font-size: 35rpx;
		font-weight: 600;
		color: #35a100;
		text-align: center;
		margin-bottom: 10rpx;
		 white-space: nowrap;
	}

	.menucontent {
		width: 100%;
		height: 100%;
	}

	.memuitemligoodprice {
		font-size: 45rpx;
		padding: 1vh 0;
		color: #f40000;
	}

	.memuitemligoodimg {
		width: 160rpx;
		height: 160rpx;
		margin-left: 15rpx;
	}

	#addandsub {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 180rpx;
		line-height: 180rpx;
		width: 180rpx;
		margin-right: 5%;
	}

	#sub {
		margin-right: 15rpx;
		vertical-align: middle;
		width: 40rpx;
		height: 40rpx;
	}

	#add {
		margin-right: 30rpx;
		vertical-align: middle;
		width: 40rpx;
		height: 40rpx;
	}

	.subimg {
		width: 40rpx;
		height: 40rpx;
	}

	.addimg {
		width: 40rpx;
		height: 40rpx;
	}

	.memuitemligoodcount {
		margin-right: 5rpx;
		font-size: 28rpx;
		font-weight: 700;
	}


	
	.payView{
		position: fixed;
		top: 85%;
		
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		
		
		height: 100rpx;
		margin-buttom: 100rpx;
		border-radius: 100rpx;
		background-color: #232400;
		
		.Button_pay_view{
			display: flex;
			margin-top: -80rpx;
			.payButton{
				width: 200rpx;
				height: 100rpx;
				border-radius: 100rpx;
				margin-right: 0rpx;
			}
			
		}
		
		.numberPirce_view{
			display: flex;
			margin-left: 5%;
			margin-top: 0;
		}
	}
	
	.listOfChoice{
		display: flex;
		height: 200rpx;
		
		.viewOfDishes{
			display: flex;
			margin-left: 2%;
			margin-top: 2%;
			
			.viewOfDished{
				width: 100rpx;
				// height: ;
			}
		}
		
		.informationOfDishes{
			margin-left: 5%;
			margin-top: 3%;
			width: 150rpx;
			.dishName{
				font-size: 48rpx;
				 white-space: nowrap;
			}
			.dishPrice{
				font-size: 36rpx;
				margin-bottom: 5%;
			}
		}
		.dishNumer{
			margin-top: 80rpx;
			margin-left: 100rpx;
		}
		
	}
	.totalPriceButtom{
		height: 80rpx;
		font-size: 40rpx;
		text-align: center;
	}
	.blank{
		height: 40rpx;
	}
	
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}
	
	.input {
		padding: 0 0px;
	}
	
	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
</style>
